<template>
  <Drawer
    placement="right"
    :closable="true"
    v-model="visible"
    width="400"
    scrollable
    @on-close="cancel"
  >
    <template #header>
      <div class="flex flex-col justify-between">
        <div class="flex items-center mb-4 gap-x-2">
          <img
            src="~@/assets/images/icon_VariableMerge.jpg"
            class="w-6 h-6"
            alt="Start icon"
          />
          <div class="flex flex-col gap-y-1">
            <p class="text-lg font-semibold text-black">{{ title }}</p>
          </div>
        </div>
        <div class="text-sm text-gray-500">对多个分支的输出进行聚合处理</div>
      </div>
    </template>
    <div class="mb-2">
      <div class="mb-1">
        <span class="font-bold text-black">聚合策略</span>
        <Tooltip
          transfer
          theme="light"
          placement="top"
          max-width="400"
          content="对同一组内的变量实施相应聚合策略"
        >
          <Icon type="ios-alert-outline" size="18" />
        </Tooltip>
      </div>
      <p class="text-sm">返回每个分组中第一个非空的值</p>
      <!-- <Select size="small" v-model="form.loopType">
        <Option
          v-for="item in LOOP_TYPE_OPTIONS"
          :value="item.value"
          :key="item.value"
          >{{ item.label }}</Option
        >
      </Select> -->
    </div>
    <div
      v-for="(item, index) in form.varagglist"
      :key="index"
      class="p-2 mb-2 border border-gray-300 border-solid rounded-md border-1"
    >
      <div class="flex items-center justify-between mb-1 text-black">
        <div class="flex items-center h-full">
          <span class="text-md">Group{{ index + 1 }}</span>
          <div class="px-3 py-1 ml-2 text-xs rounded-xs bg-slate-100">
            {{ item.vartype }}
          </div>
        </div>
        <Icon
          class="pointer"
          type="md-remove"
          size="16"
          @click.stop="removeInput(index)"
        />
      </div>
      <div>
        <div
          v-for="(child, cIndex) in item.inoutlist"
          class="flex items-center mb-1"
        >
          <div class="w-full flex" v-if="cIndex == 0 && item.inoutlist.length == 1">
            <div style="width: 100px">
              <Select size="small" v-model="child.vartype" @on-change="$event=>handleItemTypeChange($event, index)">
                <Option
                  v-for="type in BE_TYPE_LIST"
                  :value="type.value"
                  :key="type.value"
                  >{{ type.label }}</Option
                >
              </Select>
            </div>
            <div class="flex-1">
              <Input
                size="small"
                v-model="child.varparam"
                check-strictly
                placeholder="输入参数值"
              >
              </Input>
            </div>
          </div>
          <Input v-model="child.varparam" style="width: 100%" v-else>
            <template #prefix>
              <p class="flex items-center h-full text-xs scale-75">
                {{ child.vartype }}
              </p>
            </template>
          </Input>
          <Icon
            class="ml-2 pointer"
            type="md-remove"
            size="16"
            @click.stop="removeChild(index, cIndex)"
          />
        </div>
      </div>
      <Button
        @click.stop="addChild(index)"
        icon="md-add"
        type="primary"
        size="small"
        >新增</Button
      >
    </div>
    <Button
      style="width: 100%"
      @click.stop="addInput()"
      icon="md-add"
      type="primary"
      >新增分组</Button
    >
    <Divider></Divider>
    <CommonCollapse title="输出" tip="分组聚合后返回的结果">
      <div
        class="flex items-center mb-2"
        v-for="(item, index) in form.varagglist"
        :key="index"
      >
        <span class="text-sm">Group{{ index + 1 }}</span>
        <div class="ml-2 text-bg-normal">{{ item.vartype }}</div>
      </div>
    </CommonCollapse>
  </Drawer>
</template>
<script setup>
import { ref } from 'vue';
import { BE_TYPE_LIST } from '../../lib/constant';
import CommonCollapse from '@/components/CommonCollapse/index.vue';

const props = defineProps({
  form: {
    type: Object,
    default: () => {},
  },
  title: {
    type: String,
    default: '变量聚合',
  },
});

const emit = defineEmits(['add', 'remove', 'add-child', 'remove-child']);

const visible = ref(false);

// 组件的增删
const addInput = () => {
  props.form.varagglist.push({
    vartype: 'String',
    inoutlist: [
      {
        varparam: '',
        vartype: 'String',
      },
    ],
  });
};
const removeInput = (index) => {
  if (index == 0) return;
  props.form.varagglist.splice(index, 1);
};

const handleItemTypeChange = (e, index) => {
  props.form.varagglist[index].vartype = e;
}
const init = () => {
  visible.value = true;
};
const cancel = () => {
  visible.value = false;
  emit('cancel');
};

const addChild = (index) => {
  props.form.varagglist[index].inoutlist.push({
    varparam: '',
    vartype: props.form.varagglist[index].vartype,
  });
};

const removeChild = (index, cIndex) => {
  if (cIndex == 0) return;
  props.form.varagglist[index].inoutlist.splice(cIndex, 1);
};

defineExpose({
  init,
});
</script>
<style lang="scss">
.panel-table-header {
  align-items: center;
  display: flex;
  gap: 4px;
  padding: 0 4px;

  .name {
    width: 120px;
    margin-right: 6px;
    box-sizing: content-box;
  }
  .center {
    text-align: center;
  }
}

:deep(.ivu-form-item-error-tip){
  font-size: 12px;
}
.panel-table-item {
  height: 30px;
  margin-right: 6px;
  &.center {
    text-align: center;
  }
  &.btn {
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    margin-left: 12px;
    height: 22px;
  }
}

.ivu-input-with-prefix {
  padding-left: 38px;
}
</style>
